<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>名单</title>
</head>
<style>
    table {
        width: 400px;
        height: auto;
        border: 1px solid black;
        padding: 5px;
        margin: 50px 0 0 200px;
    }
    tr {
        width: 400px;
        height: 50px;
    }
    td {
        width: 94px;
        height: 48px;
        border: 1px solid black;
        margin: 0 2px;
        text-align: center;
    }
    td > a {
        color: blue;
    }
    .xg {
        margin-left: 5px;
    }
    .b {
        position: absolute;
        top: 100px;
        left: 700px;
        display: none;
    }
</style>
<body id="bo">
    <div class="a">
        <span>姓名：</span>
        <input type="text" value="" id="user">
        <span>年龄：</span>
        <input type="text" value="" id="age">
        <button id="tj">添加</button>
        <button id="ss">搜索</button>
    </div>
    <table id="ta">
        <tr>
            <td>ID</td>
            <td>姓名</td>
            <td>年龄</td>
            <td style="color: black;">操作</td>
        </tr>
        <tr>
            <td>1</td>
            <td>赵日天</td>
            <td>99</td>
            <td><a href="javascript:;">删除</a><button class="xg">修改</button></td>
         </tr>
    </table>
    <div class="b" id="b">
        <span>姓名：</span>
        <input type="text" value="" id="bu">
        <span>年龄：</span>
        <input type="text" value="" id="ba">
        <button id="xiug">修改</button>
    </div>
</body>
<script>
    function creat (cr) {
        return document.createElement(cr);
    }
    function getid (id) {
        return document.getElementById(id);
    }
    
    var bo = getid("bo");
    var table = getid("ta");
    var user = getid("user");
    var age = getid("age");
    var tj = getid("tj");
    var ss = getid("ss");

    var b = getid("b")
    var bu = getid("bu");
    var ba = getid("ba");
    var xiug = getid("xiug");
    
    function add () {
        if (!rename()) {alert("重名了！亲。。。");}
        if (user.value != "" && age.value != "") {
        if (age.value > 0 && age.value < 100  && rename()) {
            var ctr = creat("tr");

            var ctd = creat("td");
            ctd.innerText = "";
            ctr.appendChild(ctd);

            var ctd = creat("td");
            ctd.innerText = user.value;
            ctr.appendChild(ctd);

            ctd = creat("td");
            ctd.innerText = age.value;
            ctr.appendChild(ctd);

            ctd = creat("td");
            ctd.innerHTML = `<a href="javascript:;">删除</a><button class="xg">修改</button>`;
            ctr.appendChild(ctd);

            table.appendChild(ctr);

            remove();
            trid();
            modify ();
            rename ();
            rebu ();
        }
        }
    }

    function remove () {
        var geta = document.getElementsByTagName("a");
        for (var i = 0;i < geta.length; i++) {
            geta[i].onclick = function () {
                this.parentNode.parentNode.remove();
                trid();
            }
        }
    }
    remove ();

    function trid () {
        var otr = document.getElementsByTagName("tr");
        for (var i = 1;i < otr.length; i++) {
            otr[i].firstElementChild.innerText = i;
        }
    }
    trid();

    function search () {
        var gettr = document.getElementsByTagName("tr");
        if (user.value != "") {
            for (var i = 1;i < gettr.length; i++) {
                if (gettr[i].children[1].innerText.indexOf(user.value) != -1) {
                    gettr[i].style.background = "skyblue";
                    gettr[i].style.color = "greenyellow";
                }else {
                    gettr[i].style.background = "";
                    gettr[i].style.color = "#333";
                }
            }
        }
    }

    function modify () {
        var getxg = document.getElementsByClassName("xg");
        var otr = document.getElementsByTagName("tr");
        for (var i = 0; i < getxg.length; i++) {
            getxg[i].onclick = function () {
                xxx = this;
                b.style.display = "block";
                xiug.onclick = function () {
                    if (!rebu()) {alert("重名了！亲。。。");}
                    if (bu.value != "" && ba.value != "") {
                    if (ba.value > 0 && ba.value < 100 && rebu ()) {
                        xxx.parentNode.previousElementSibling.innerText= ba.value;
                        xxx.parentNode.previousElementSibling.previousElementSibling.innerText= bu.value;
                        b.style.display = "none";
                    }
                    }
                }
                
            }
        }
    }
    modify ();

    function rename () {
        var otr = document.getElementsByTagName("tr");
        for (var i = 0;i < otr.length; i++) {
            if (otr[i].children[1].innerText == user.value) { 
                return 0;
                break;
            }
            else if (i+1 == otr.length){
                return 1;
            }
        }
        
    }
    rename ();

    function rebu () {
        var otr = document.getElementsByTagName("tr");
        for (var i = 0;i < otr.length; i++) {
            if (otr[i].children[1].innerText == bu.value) { 
                return 0;
                break;
            }
            else if (i+1 == otr.length){
                return 1;
            }
        }
        
    }
    rebu ();
    
    tj.onclick = add;
    ss.onclick = function () {
        search();
    }
</script>
</html>